网页巡检工具实践

背景

随着酷家乐网站功能的不断迭代，业务场景也越来越复杂。网站页面多且层级深，账号类型多且权限易变，导致测试人员的回归测试工作冗余和繁杂。为了减轻回归工作，日常巡检能力是必要的，本文主要介绍网页巡检工具在酷家乐的使用和实践。

实现原理

如何获取网页信息是网页巡检的核心点，对此我们选取了Puppeteer开源工具，Puppeteer是Node.js工具引擎，它提供了一系列API，通过Chrome DevTools Protocol协议控制Chromium或Chrome。在网页巡检工具里，Puppeteer主要是作为一个爬虫工具来获取以下页面内容：

• 网页访问是否正常

检测网页是否正常可访问的，网页链接是否404，是否超时

await page.goto(url, {waitUntil: 'domcontentloaded'}).catch(async error => {
    console.log(error);
});
page.on('pageerror', pageerr=> {
    console.log(pageerr);
})

• 网页调用的API信息

通过page.on('requestfinished')获取网页Network信息，并过滤出Type为xhr的。这个时候就可以得到用户在访问网页的时候调用了哪些接口，包括接口的参数，接口的返回状态、返回值等。也可以优先过滤出status非200的接口重点关注。

page.on('requestfinished', async req => {
    const res = req.response();
    if (req.resourceType() == "xhr" && res.status() !== 200) {
        console.log("api:"+req.url()+",req:"+req.postData()+",status:"+res.status()+",hunterid:"+res.headers().hunterid);
        res.text().then(text => {
            console.log("res:"+text);
        });
});

• 网页console信息

网页如果发生错误，在Console里可能会出现一些错误信息。可以通过page.on('console')获取网页Console信息，同样可以过滤出error类型的。

page.on('console', msg => {
    console.log(msg.text());
});

• 其他自定义信息

const counts = await page.$$eval('.ant-message-error', el => el.length);
if(counts !== 0) {
    const content = await page.$eval('.ant-message-error', el => el.innerText);
    console.log(content);
}

举个例子，如果获取数据失败时，页面可能会给用户一些toast提示，巡检时这一部分可以通过定位元素是否存在来判断。但是如果这个自定义信息变动比较频繁可能就不太适用了。

• 网页子链接

urls = await page.evaluate(
    () => Array.from(document.body.querySelectorAll('a[href]'), ({ href }) => href)
);

当然我们可以人工统计所有网站页面链接，对每一个页面都进行检测。但是更方便的是，通过工具直接查找到网页中的子链接，再巡检子链接。这样就可以巡检到2层甚至3层的网页，既可以巡检出网页中的死链，也不用担心新增网页的遗漏和网页链接变化的维护工作，当然也不要忘记网页链接的去重。
目前只支持a标签的子链接获取，但如果菜单不是通过a链接的形式的或者是a[href=javascript:;]这种，退而求其次的方案是模拟依次点击菜单获取此时跳转后的页面链接来获取子链接。类似于这样：

const elements = await page.$$('a[href=\'javascript:;\']');
for (let element of elements) {
    try {
        await element.click();
        await page.waitFor(500);
        console.log(page.url());
    } catch (e) {
        console.log(e);
        break;
    }
}

工具介绍

知道了如何获取页面内容功能之后，接下来介绍网页巡检工具

如果需要登录，在用户登录方面有个小技巧，首先会先使用Puppeteer访问登录页面，模拟输入用户名和密码进行表单提交，登录成功后，获取此时的cookie信息。在巡检下一个网页的时候，可以直接注入cookie来跳过登录操作，节省巡检的时间。当然如果检测到cookie中没有需要的信息，会重新进行登录操作。

定时巡检功能：

可以通过设置定时任务定时执行巡检，也可以手动启动巡检任务

过滤url功能：

可以设定只有url包含某些词才会进行巡检，或者url包含某些词就不进行巡检，避免掉一些不必要的url

对比两个环境接口返回值：

只巡检页面接口是否200是远远不够的，巡检工具还能做些什么？

前文讲到网页巡检工具可以获取页面调用接口的参数、返回值等信息，那么如果将预发环境和正式环境巡检得到的接口返回值进行对比，就可以进一步实现页面的接口巡检。同时可以利用kudiffy平台的json串对比降噪功能排除一些随机数的干扰。

目前对比巡检功能还在完善中

巡检结果通知：

巡检结果通过企信通知到对应的负责人

遇到的问题

1. 页面数据不全
   需要等待页面加载完成再进行巡检，不然可能导致页面数据不全；每个页面都停留3秒，避免因网络等问题造成遗漏

2. 页面重定向
   页面重定向时需要兼容并记录这次重定向信息

3. Chromium无法播放视频
   网页上视频无法播放导致有错误，不使用Chromium打开网页，改成Chrome来解决这个问题

未来展望

1.完善对比巡检功能，页面的接口对比巡检更易用

2.与UI自动化打通，进一步对网页中的功能操作造成的问题也进行记录